<template>
    <div style="padding: 20px;" class="orgManage">
      <el-table
        :data="orgTreeData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'subOrginization', hasChildren: 'hasChildren'}">
        <el-table-column prop="name" label="组织架构" sortable min-width="200" header-align="center" align="left">
        </el-table-column><el-table-column prop="jobTypes" label="在职（直属/总共）" sortable header-align="center" align="center" width="200"></el-table-column>
        <el-table-column prop="memberTypes" label="编制（直属/总共）" header-align="center" align="center" width="200"></el-table-column>
        <el-table-column prop="responsebilitiesNames " label="部门负责人" header-align="center" align="left" min-width="250"></el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="250">
          <template slot-scope="scope">
            <div class="table-operate-btns">
              <el-button type="text" size="small" @click="addSubOrg(scope.row)">新增子部门</el-button>
              <el-button type="text" size="small" @click="addSubOrg(scope.row)">移动</el-button>
              <el-button type="text" size="small" @click="addSubOrg(scope.row)">合并</el-button>
              <el-button type="text" size="small" @click="addSubOrg(scope.row)">编辑</el-button>
              <el-button type="text" size="small" class="del-btn-hover" @click="addSubOrg(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog title="添加子节点"  class="spl-dialog" :visible.sync="addDdialogVisible" width="600px" center>
        <el-form :model="addSubForm" ref="addSubForm" label-width="90px">
          <div class="addSubForm">
            <el-form-item label="名称" prop="name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur'}]">
              <el-input v-model="addSubForm.name" placeholder="1-50个字符" class="w-250" minlength="1" maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="编码" prop="code" :rules="{ required: true, message: '请输入编码', trigger: 'blur' }">
              <el-input v-model="addSubForm.code" placeholder="1-50个字符" class="w-250" minlength="1" maxlength="50"></el-input>
            </el-form-item>

            <el-form-item label="类别" prop="type" :rules="{ required: true, message: '请选择类别', trigger: 'blur' }">
              <el-select v-model="addSubForm.type" filterable clearable class="w-250" placeholder="请选择类别">
                <el-option label="test" value="test"></el-option>
              </el-select>
               <!-- <el-option
                  v-for="item in obligorOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>-->
            </el-form-item>

            <el-form-item label="负责人" prop="responsibilities">
              <el-select v-model="addSubForm.responsibilities" clearable class="w-250" placeholder="请选择负责人">
                <el-option label="test" value="test"></el-option>
              </el-select>
              <!-- <el-option
                 v-for="item in obligorOptions"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select>-->
            </el-form-item>
            <el-form-item label="工作地点" prop="stationId">
              <el-select v-model="addSubForm.stationId" clearable class="w-250" placeholder="请选择工作地点">
                <el-option label="test" value="test"></el-option>
              </el-select>
              <!-- <el-option
                 v-for="item in obligorOptions"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select>-->
            </el-form-item>

            <el-form-item label="编制" prop="members">
              <el-input v-model="addSubForm.members" placeholder="请输入数字" class="w-250"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description" class="mb-0">
              <el-input type="textarea" v-model="addSubForm.description" placeholder="请输入"
                        :autosize="{minRows: 2, maxRows: 5}"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer operate-btns-bottom mt-20">
          <el-button @click="addDdialogVisible = false" class="mr-40">取 消</el-button>
          <el-button type="primary" :loading="addBtnLoading" @click="checkSaveAdd">确 认</el-button>
        </div>
      </el-dialog>

      <!--<el-dialog title="移动部门"  class="spl-dialog" :visible.sync="moveDdialogVisible" width="500px" center>-->
        <!--<el-form :model="moveForm" ref="moveForm" label-width="90px">-->
            <!--<el-form-item label="上级部门" prop="name" :rules="[{ required: true, message: '请输入名称', trigger: 'blur'}]">-->
              <!--<el-input v-model="moveForm.name" placeholder="1-50个字符" class="w-250" minlength="1" maxlength="50"></el-input>-->
            <!--</el-form-item>-->
        <!--</el-form>-->
        <!--<div slot="footer" class="dialog-footer operate-btns-bottom mt-20">-->
          <!--<el-button @click="addDdialogVisible = false" class="mr-40">取 消</el-button>-->
          <!--<el-button type="primary" :loading="addBtnLoading" @click="checkSaveAdd">确 认</el-button>-->
        <!--</div>-->
      <!--</el-dialog>-->

    </div>
</template>
<script>
export default {
  data () {
    return {
      orgTreeData: [],
      addDdialogVisible: false,
      addBtnLoading: false,
      workstationArr: [],
      addSubForm: {
        code: '',
        description: '',
        id: '',
        members: '',
        name: '',
        parentId: '',
        responsibilities: [],
        stationId: '',
        type: ''
      },
      moveForm: {
        code: '',
        description: '',
        id: '',
        members: '',
        name: '',
        parentId: '',
        responsibilities: [],
        stationId: '',
        type: '',
        works: 0
      }
    }
  },
  components: {},
  created () {
    this.getOrgTreeData()
    this.getWorkstation()
  },
  methods: {
    getOrgTreeData () {
      this.$http({
        url: '/company/organization/tree',
        method: 'get',
        params: {}
      }).then(({ data }) => {
        // var all = [{id: '',name:'所有部门',icon: 'el-icon-s-home'}]
        // var allOrg = all.concat(data.data.subOrginization)
        this.orgTreeData = data.data.subOrginization
      })
    },
    addSubOrg (row) {
      this.addSubForm.id = row.id
      this.addDdialogVisible = true
    },
    checkSaveAdd () {
      this.addBtnLoading = true
      this.$refs['addSubForm'].validate((valid) => {
        if (!valid) {
          this.addBtnLoading = false
        } else {
          this.doSaveAdd()
        }
      })
    },
    doSaveAdd () {
      // this.addBtnLoading = false
      this.$http({
        url: '/company/organization/save',
        method: 'post',
        data: this.addSubForm
      }).then(({ data }) => {
        // var all = [{id: '',name:'所有部门',icon: 'el-icon-s-home'}]
        // var allOrg = all.concat(data.data.subOrginization)
        this.orgTreeData = data.data.subOrginization
      })
    },

  //  获取工作地
    getWorkstation (id) {
      // this.addBtnLoading = false
      this.$http({
        url: '/company/workstation/namepair',
        method: 'get',
        data: this.addSubForm
      }).then(({ data }) => {
        this.workstationArr = data.data
      })
    }
  }
}
</script>

<style lang='less'>
  .orgManage{
    de.-btn{

    }
  }
</style>
<style lang='less' scoped>
.custom-tree-node{
  display: flex;
  width: 100%;
  .table-col{
    float: left;
    width: 200px;
  }
  .table-col-opera{
    width: 350px;
  }
  .el-tree-node__content{
    padding-right: 18px;
  }
}
</style>
